<!-- 友链编辑弹窗 -->
<template>
  <el-dialog :title="isUpdate ? '修改云挂机CDK批次' : '添加云挂机CDK批次'" :visible="visible" width="860px" :destroy-on-close="true"
    :lock-scroll="false" :close-on-click-modal="false" :before-close="confirmClose" @update:visible="updateVisible">
    <el-form ref="form" :model="form" :rules="rules" label-width="82px">
      <el-form-item label="批次名称:" prop="name">
        <el-input clearable :maxlength="20" v-model="form.name" placeholder="请输入激活码批次名称" />
      </el-form-item>
      <el-form-item label="批次前缀:" prop="prefix">
        <el-input clearable :maxlength="20" v-model="form.prefix" placeholder="请输入批次前缀" />
      </el-form-item>
      <el-form-item label="使用时长:" prop="duration">
        <el-input clearable :maxlength="20" type="number" v-model="form.duration" placeholder="请输入使用时长" />
      </el-form-item>
      <el-form-item label="使用上限:" prop="use_limit">
        <el-input clearable :maxlength="20" type="number" v-model="form.use_limit" placeholder="请输入使用上限" />
      </el-form-item>
      <el-form-item label="使用方式:" prop="use_type">
            <el-select v-model="form.use_type" placeholder="请选择" width="100%">
              <el-option label="不限制" :value=0 />
              <el-option label="仅新增" :value=1 />
              <el-option label="仅续费" :value=2 />
            </el-select>
        </el-form-item>
      <el-form-item label="上架状态:" prop="status">
        <el-radio-group v-model="form.status" size="medium">
          <el-radio :label="1" border>上架</el-radio>
          <el-radio :label="2" border>下架</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注内容:" prop="desc" style="margin-top: 20px">
        <el-input :rows="3" clearable type="textarea" :maxlength="200" v-model="form.desc" placeholder="请输入备注内容" />
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="confirmClose()">取消</el-button>
      <el-button type="primary" @click="save" :loading="loading">保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "YunGoodsDetailEdit",
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    editData: Object
  },
  data() {
    return {
      // 表单数据
      form: Object.assign({}, this.editData),
      // 表单验证规则
      rules: {
        name: [
          {
            required: true,
            message: "请输入批次名",
            trigger: "blur"
          }
        ],
        prefix: [
          {
            required: true,
            message: "请输入批次前缀",
            trigger: "blur"
          }
        ],
        duration: [
          {
            required: true,
            message: "请输入兑换时长",
            trigger: "blur"
          }
        ],
        get_time: [
          {
            required: true,
            message: "请输入商品时长 (单位: 天)",
            trigger: "blur"
          }
        ],
        use_limit: [
          {
            required: true,
            message: "请输入使用上限",
            trigger: "blur"
          }
        ],
        use_type: [
          {
            required: true,
            message: "请选择使用方式",
            trigger: "blur"
          }
        ],

        status: [
          { required: true, message: "请选择上架状态", trigger: "blur" }
        ],

      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      types: [
        {
          value: 0,
          label: "普通商品"
        },
        {
          value: 1,
          label: "活动商品"
        }
      ]
    };
  },

  watch: {
    data() {
      if (this.data) {
        this.form = Object.assign({}, this.data);
        this.isUpdate = true;
      } else {
        this.form = {};
        this.isUpdate = false;
      }
    },
    visible(val) {
      if (val) {
        if (this.editData) {
          this.form = Object.assign(
            {},
            {
              ...this.editData,
              time_range: [this.editData.up_time, this.editData.down_time]
            }
          );
          this.isUpdate = true;
        } else {
          this.form = {};
          this.isUpdate = false;
        }
      }
    }
  },
  methods: {
    /* 保存编辑 */
    save() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true;
          this.$http
            .post("/BoxYunCdkBatch/edit", this.form)
            .then(res => {
              this.loading = false;
              if (res.data.code === 0) {
                this.$message.success(res.data.msg);
                if (!this.isUpdate) {
                  this.form = {};
                }
                this.updateVisible(false);
                this.$emit("done");
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch(e => {
              this.loading = false;
              this.$message.error(e.message);
            });
        } else {
          return false;
        }
      });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit("update:visible", value);
    },

    confirmClose() {
      this.$confirm("确定要返回吗？", "温馨提示")
        .then(() => {
          this.updateVisible(false);
          if (!this.isUpdate) {
            this.form = {};
          }
        })
        .catch(() => { });
    }
  }
};
</script>

<style scoped></style>
